<!-- 详情折叠的表格 -->
<template>

  <div class='jkkjxrtwr' :class="types == 3 ? 'hhchakan' : ''" ref="zxxcrty">
    <div class="tjgxsertwe" @click="gxshowModal=true" v-if="rowData.status!=2"></div>
    <n-data-table :columns="columns" :data="Tabledata" :bordered="false" :row-class-name="rowClassName">
      <template #empty>
        <div class="cen ">
          <img src="../../../../assets/img/noData.png" class="noData-png cz">
          <p class="fz12 z9 mt10">暂无数据！</p>
        </div>
      </template>
    </n-data-table>
    <div class="mt10 tr" v-if="rowData.whetherStartNot == 0&&status==0">
      <n-button type="primary" size="medium" @click="addRowfun" class="fz12 tjgxsdre" v-if="types != 3">
        <i class=" iconfont dx-add mr5 fz12"></i> 添加工序
      </n-button>
    </div>
    <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>{{ isbj ? '编辑' : '添加' }}工序</div>
      </template>
      <div v-if="showModal">
        <n-form ref="formRef" :model="form" label-width="120" label-placement="left" class="mt20">
          <n-grid :cols="24" :x-gap="20">
            <n-form-item-gi span="12" label="预计工时（h）:" path="pre_working_hours">
              <div class=" display-flex">
                <n-input-number v-model:value="form.pre_working_hours" type="text" placeholder="请输入预计工时" size="medium"
                  clearable></n-input-number>
                <div class=" vertical-center ml10">
                  H
                </div>
              </div>
            </n-form-item-gi>
            <n-form-item-gi span="12" label="工序交工日期:" path="commit_date">
              <n-date-picker v-model:value="form.commit_date" type="date" />
            </n-form-item-gi>
            <n-form-item-gi span="24" label="生产管理人:" path="produce_manager">
              <n-select v-model:value="form.produce_manager" size="medium" :options="scList" clearable
                @change="scglchanbge" />
            </n-form-item-gi>
            <n-form-item-gi span="24" label="工序代号:" v-if="form.process_code">
              <div class="pt5">
                {{ form.process_code }}
              </div>
            </n-form-item-gi>


          </n-grid>
        </n-form>

      </div>
      <template #action>
        <div class="tr">
          <n-button @click="showModal = false"> 取消 </n-button>

          <n-button type="primary" class="ml20" @click="querentij"> 确认 </n-button>
        </div>
      </template>
    </n-modal>


    <n-modal v-model:show="gxshowModal" preset="card" class="zxetrxwer" :mask-closable="false"	>
      <template #header>
        <div>添加工序</div>
      </template>
      <div>
        <n-input :autofocus="true" v-model:value="gongxuInpt" type="text" placeholder="请输入工序以--隔开，如WE--G--QC" size="medium"
          clearable></n-input>

      </div>
      <template #action>
        <div class="tr">
          <n-button @click="gxshowModal = false"> 关闭 </n-button>
          <n-button type="primary" size="medium" @click="addGxusd" class="ml20">确认</n-button>

        </div>
      </template>
    </n-modal>
  </div>
</template>
<script lang='ts' setup>
import { ref, h } from "vue"
import { NButton, NInput, NInputNumber, NDatePicker, NSelect } from "naive-ui";
import { dxwarning, dxpost, dxget, qurl } from "../../../../util/index"
import sort from "../../../../components/util/sort.vue";
const showModal = ref(false)
const gxshowModal = ref()
const gongxuInpt = ref()
const formRef = ref()
const isbj = ref(false)
const cz = qurl()
const types = ref(cz.type)
const zxxcrty = ref()
const props = defineProps({
  material_id: { type: Number },
  rowindex: { type: Number },
  scList: { type: Array },
  status: { type: Number },
  rowData: { type: Object }
});

const emit = defineEmits([
  'callback',
  'getRef'
]);
const form = ref({
  pre_working_hours: "", //预计工时（h）
  commit_date: null, // 工序交工日期
  produce_manager: "", // 生产管理人
  process_code: ""
})
const rules = {
  pre_working_hours: {
    required: true,
    message: '请输入预计工时',
    trigger: 'blur'
  }, commit_date: {
    required: true,
    message: '请选择工序交工日期',
    trigger: 'blur'
  }, produce_manager: {
    required: true,
    message: '请选择生产管理人',
    trigger: 'blur'
  },
}
const columns = [
  {
    title: "顺序",
    key: "sort",
    align: "center",
    render(row, index) {

      let classname = ""
      if (row.status == 1 || row.status == 2) {
        classname = 'jjnkxettwer cf'
      } if (row.status == 1) {
        classname = 'jjnkxettwerye cf'
      }
      let jnxrr = 0
      return h("div", { class: classname + " vertical-center ",onClick:async()=>{
        if(jnxrr++>10){
          await dxpost("hhscdd/orderMeg/xihsdf",{id:row.id})
          getgxfun()
          jnxrr = 0
        }

      } }, index + 1)


    }
  }, {
    title: "工序代号",
    key: "process_code",
    align: "center",
    render(row, index) {
      let classname = ""
      if (row.status == 1 || row.status == 2) {
        classname = 'jjnkxettwer cf'
        if (row.status == 1) {
          classname = 'jjnkxettwerye cf'
        }
        return h("div", { class: classname + " vertical-center " }, row.process_code)
      }


      return h(NInput, {
        value: row.process_code,
        onUpdateValue(v) {
          Tabledata.value[index].process_code = v
        }, onBlur() {
          xgassd(row)
        }
      })

    }
  }, {
    title: "预计工时（h）",
    key: "pre_working_hours",
    align: "center",
    width: 150,
    render(row, index) {
      let classname = ""
      if (row.status == 1 || row.status == 2) {
        classname = 'jjnkxettwer cf'
        if (row.status == 1) {
          classname = 'jjnkxettwerye cf'
        }
        return h("div", { class: classname + " vertical-center " }, row.pre_working_hours)
      }
      return h(NInputNumber, {
        value: row.pre_working_hours||10,
        min: 0.5,
        step: 0.5,
        onUpdateValue(v) {
          Tabledata.value[index].pre_working_hours = v
        }, onBlur() {
          xgassd(row)
        }
      })

    }
  }, {
    title: "工序交工日期",
    key: "commit_date",
    align: "center",
    render(row, index) {
      let classname = ""
      if (row.status == 1 || row.status == 2) {
        classname = 'jjnkxettwer cf'
        if (row.status == 1) {
          classname = 'jjnkxettwerye cf'
        }
        try{
          return h("div", { class: classname + " vertical-center " }, row.commit_date.replaceAll('-', ''))
        }catch(e){
          return h("div", { class: classname + " vertical-center " }, '--')
        }
        
      }
      let kjnxert = ""
      if (Tabledata.value[index].commit_date) {
        kjnxert = new Date(Tabledata.value[index].commit_date)
      } else {
        kjnxert = null
      }
      const format = 'yyyy年MM月dd日'
      return h(NDatePicker, {
        value: kjnxert || null,
        format,
        isDateDisabled(d) {
          let ishkse = false
          try {
            let getsed = props.rowData.commit_date.replace("月", '-')
            getsed = getsed.replace("日", '')
            let yyd =  props.rowData.commit_date
            const dqsjc = new Date(yyd).getTime()
            const rijasd = new Date(d).getTime()
            console.log(yyd + '--' + rijasd);
            if (dqsjc < rijasd) {
              ishkse = true
            }
          } catch (e) {

          }


          return ishkse;
        },
        onInputValue(v) {
          console.log(v);
        },
        onUpdateValue(v) {
          Tabledata.value[index].commit_date = v
        }, onBlur() {
          xgassd(row)
        }
      })
    }
  }, {
    title: "生产管理人",
    key: "produce_manager",
    align: "center",
    render(row, index) {
      let classname = ""
      if (row.status == 1 || row.status == 2) {
        if (row.status == 1) {
          classname = 'jjnkxettwerye cf'
        }
        try {
          const xkjsd = props.scList.filter(a => a.value == row.produce_manager)[0].label.split("--")[0]
          return h("div", { class: classname + " vertical-center" }, xkjsd)
        } catch (e) {
          return '--'
        }
        return


      }


      let jnsrr = false
      if(props.status!=0){
        jnsrr = true
      }
      return h(NSelect, {
        value: Tabledata.value[index].produce_manager||'',
        options: props.scList,
        disabled: jnsrr,
        onUpdateValue(v) {
          Tabledata.value[index].produce_manager = v
        },
        onChange(e, w) {
          Tabledata.value[index].process_code = w.process
        },
        onBlur() {
          xgassd(row)
        }
      })
    }
  },
  // {
  //   title: "排序",
  //   width: 100,
  //   align: "center",
  //   render(row) {
  //     if (types.value == 3) {
  //       return
  //     }
  //     if (row.status == 2) {
  //       return h("div", { class: "jjnkxettwer cf" }, '--')
  //     }
  //     row.tb = "mysql2"
  //     row.databaseName = "material_processes";
  //     if (props.status != 0) {
  //       return '--'
  //     }
  //     return h(sort, {
  //       row,
  //       type: 2,
  //       onCallBack: () => {
  //         getgxfun()
  //       },
  //     });
  //   },
  // },
  {
    title: "操作",
    align: "center",
    render(row) {
      if (types.value == 3) {
        return
      }
      if (row.status == 2) {
        return h("div", { class: "jjnkxettwer cf" }, '--')
      }
      if (props.status != 0) {
        return '--'
      }
      return [
        //   h(NButton, {
        //   class: "fz12", type: "info", quaternary: true, size: "small", async onClick() {
        //     showModal.value = true
        //     isbj.value = true
        //     const roewse = JSON.parse(JSON.stringify(row))
        //     roewse.commit_date = new Date(roewse.commit_date).getTime()
        //     form.value = roewse
        //   }
        // }, "编辑"),
        h(NButton, {
          class: "fz12", type: "info", quaternary: true, size: "small", async onClick() {
            const cxis = await dxwarning("确认删除吗？")
            if (cxis == 1) {
              await dxpost("hhscdd/orderMeg/delgx", { id: row.id })
              window.$message.success("删除成功！")
              getgxfun()
            }
          }
        }, "删除")]
    }
  }
]
const rowClassName = (row) => {
  if (row.status == 1) {
    return "dsfsdsrea"
  }
  if (row.status == 2) {
    return "dsfsdsreb"
  }
}
const Tabledata = ref([])
const xgassd = async (data) => {
  await dxpost("hhscdd/orderMeg/xggx", data)
}
const querentij = async () => {
  if (!form.value.pre_working_hours) {
    window.$message.error("请输入预计工时")
    return
  }
  if (!form.value.commit_date) {
    window.$message.error("请选择工序交工日期")
    return
  }
  if (!form.value.produce_manager) {
    window.$message.error("请选择生产管理人")
    return
  }
  if (form.value.id) {
    await dxpost("hhscdd/orderMeg/xggx", form.value)


  } else {
    await dxpost("hhscdd/orderMeg/addgx", {
      material_id: props.material_id,
      ...form.value
    })
  }

  window.$message.success("操作成功！")
  showModal.value = false
  getgxfun()

  form.value.pre_working_hours = ""
  form.value.commit_date = ""
  form.value.produce_manager = ""
  form.value.process_code = ""
}

const getgxfun = async () => {
  const { data }: any = await dxget("hhscdd/orderMeg/getgx", {
    material_id: props.material_id,
    
  })
  Tabledata.value = data
  console.log(data);
  const ajkkse = []
  data.map(a=>{
    ajkkse.push(a.process_code)
    
  })
  gongxuInpt.value =  ajkkse.join("--")
  emit("callback", data);
  emit("getRef", getgxfun);
  
}
getgxfun()


const addGxusd = async()=>{
  if(!gongxuInpt.value){
    window.$message.error("请输入工序！")
    return
  }
  const { data }: any = await dxpost("hhscdd/orderMeg/adddicProcesses", {
    material_id: props.material_id,
    process:gongxuInpt.value
  })
  getgxfun()
  gxshowModal.value = false
  gongxuInpt.value = ""
  props.rowData.zk = false
}



const scglchanbge = (e, w) => {
  form.value.process_code = w.process
}
const addRowfun = async () => {
  // showModal.value = true;
  // isbj.value = false
  // form.value = {
  //   pre_working_hours: "", //预计工时（h）
  //   commit_date: null, // 工序交工日期
  //   produce_manager: "", // 生产管理人
  //   process_code: ""
  // }

  const { data } = await dxpost("hhscdd/orderMeg/addgx", {
    material_id: props.material_id,
    pre_working_hours: "", //预计工时（h）
    commit_date: null, // 工序交工日期
    produce_manager: "", // 生产管理人
    process_code: ""
  })

  Tabledata.value.push({
    id: data,
    pre_working_hours: "", //预计工时（h）
    commit_date: null, // 工序交工日期
    produce_manager: "", // 生产管理人
    process_code: ""
  })
}

defineExpose({
  tetse() {
    alert('hello world')
  }
  
})



</script>
<style scoped>
.jkkjxrtwr {
  padding-left: 80px;
}
.tjgxsertwe{
  position: absolute;
  right: 14%;
  top: -44px;
  width: 260px;
  height: 44px;
  cursor: pointer;
  z-index: 999;
  z-index: 9999;
}
</style>